//导航栏跟随
var nav = document.querySelector(".main-nav");

var navlist = document.querySelector(".nav-warp-list");
var lilist = document.querySelectorAll(".warp-item");
var foolrs = document.querySelectorAll(".todyshow .index-foolr1");
var index = 0;
//元素距离页面高度

var itemHeight = [];
for (var i = 0; i < foolrs.length; i++) {
  console.log(foolrs[i].offsetTop);
  itemHeight.push(foolrs[i].offsetTop);
}
//左侧导航栏点击跳转到对应位置
for (var i = 0; i < lilist.length; i++) {
  lilist[i].classList.remove("active");
  lilist[i].index = i;
  lilist[i].onclick = function() {
    document.scrollingElement.scrollTop = itemHeight[this.index] - 150;
    lilist[i].classList.add("active");
  };
}

//设置左侧导航栏位置
//  navlist.style.top=itemHeight[0]+'px'

window.onscroll = function() {
  var scrollTop = document.scrollingElement.scrollTop;
  //滚动让左侧背景跟随
  for (var i = 0; i < itemHeight.length; i++) {
    lilist[i].classList.remove("active");
    if (scrollTop + 200 >= itemHeight[i]) {
      index = i;
    }
  }
  lilist[index].classList.add("active");

  //左边导航栏
  if (scrollTop >= 1550) {
    navlist.style.position = "fixed";
    navlist.style.top = 170 + "px";
    navlist.style.left = 60 + "px";
  } else {
    navlist.style.position = "absolute";
    navlist.style = itemHeight[0] + "px";
  }

  //顶部导航栏
  if (scrollTop >= 300) {
    nav.style.position = "fixed";
    nav.style.top = 0;
    nav.style.boxShadow = "0 2px 3px rgba(0,0,0,0.1)";
    // nav.style.left = 0;
  } else {
    nav.style.position = "static";
    nav.style.boxShadow = "none";
    nav.style.top = -nav.offsetHeight + "px";
  }
};


console.log(`
一、首页一栏的导航共20分  
  1.地址选择10分                  8
  2.导航栏选项卡10分              9
    
二、唯品会logo一栏的导航共10分                 
  1.搜索框点击功能7分            7
  2.购物袋3分                   3

三、商品分类共15分
  1.三级菜单12分                  10
  2.固定位置3分                   3

四、轮播图10分   
  1.指示灯3分                    2
  2.按钮4分                      4
  3.自动4分                      4

五、右侧边栏共15分  
  1.账号5分                     5
  2.购物袋5分                    5
  3.其余5分                      5

六、左侧导航固定位置共15分
  1.左侧导航栏的跟随和固定位置设定5分   4
  2.背景跟随5分                      5
  3.点击跳转5分                      5

七、页面其余效果共15分               13

                                   总分92
`);